import React, { Component } from 'react';
import { connect } from 'react-redux';
import Http from '../../utils/http';
import { StoreState } from '../../store';
import { setHomeInfo } from '../../store/actions';
import { HomeInfoState } from '../../store/reducers/home';
import './index.css';
interface Props {
    homeInfo: HomeInfoState,
    setHomeInfo: Function
}
interface State {
    value: string | number | undefined
    msg: string | undefined
}
class Home extends Component<Props, State> {
    Http: { post(api: string, params: any, options: any): Promise<unknown>; get(api: string, params: any): Promise<unknown>; };
    constructor(props: Props) {
        super(props);
        this.Http = Http;
        this.state = {
            value: '',
            msg: ''
        }
    }
    render() {
        return (
            <div>
                <div >
                    <div className='bot_content'>
                        { this.state.msg }
                    </div>
                    <div>
                        <input type="text" value={ this.state.value } onChange={ this.valueChange }/>
                        <button onClick={this.handleClick}>send</button>
                    </div>
                </div>
            </div>
        )
    }
    valueChange = (e: any) => {
        e.persist();
        this.setState({
            value: e.target.value
        })
    }
    handleClick = () => {
        this.Http.get('/api', {
            key: 'free',
            appid: 0,
            msg: this.state.value
        }).then((res: any) => {
            // console.log(res);
            if (res.status === 200) {
                this.setState({
                    value: '',
                    msg: res.data.content
                });
            } else {
                this.setState({
                    value: '',
                    msg: '智能回答接口挂了啊！！'
                });
            }
        }, (err: any) => {
            this.setState({
                value: '',
                msg: JSON.stringify(err)
            });
        })
    }
}

const stateToProps = (state: StoreState) => ({
    homeInfo: state.homeInfo
});
const dispatchToProps = {
    setHomeInfo
};
export default connect(
    stateToProps,
    dispatchToProps
)(Home);
